@import 'common_component.less';
@import 'UI/calendar.less';
@import 'UI/htmlEditor.less';

@maxWidth: 750px;
.centerLimitWidth {
	max-width: @maxWidth;
	margin: 0 auto;
}

.center {
	.centerLimitWidth;
}

h4 {
	.centerLimitWidth;
	font-weight: bold;
	padding: 2% 0 1% 10px;
	box-sizing: border-box;
	font-size: 1.2em;
	margin-bottom: 5px;
	letter-spacing: 2px;
	color: #333;
	border-bottom: 1px solid lightgray;
}

ul.list li {
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 10px;
}

.box {
	border: 1px solid lightgray;
	padding: 1% 2%;
}

body > p {
	color: #333;
	line-height: 160%;
	font-size: 1rem;
	letter-spacing: 0px;
	text-align: justify;
	word-break: break-all;
	max-width: @maxWidth;
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}

nav {
	width: 100%;
	color: #555;
	height: 40px;
	line-height: 40px;
	background: -webkit-gradient(linear, left top, left 40, from(#FFF), color-stop(96%, #eee), to(#FFF));
	background: -moz-linear-gradient(top, white, #fff 1px, #eee 20px);
	border-radius: 2px;
	border-bottom: 1px solid #C9C9C9;
	& > ul {
		max-width: @maxWidth;
		margin: 0 auto;
		& > li {
			float: left;
			padding: 0 2%;
			.downdrop_menu_parentNode ();
			menu {
				line-height: 25px;
				padding: 0 5px;
				width: 200px;
				background-color: #eee;
				border: 1px solid #C9C9C9;
				border-top: 0;
				font-size: .8rem;
				li {
					list-style-type: decimal;
					list-style-position: inside;
				}

				div {
					color: gray;
					line-height: 15px;
					margin: 10px 0;
				}
			}
		}
	}
}

h3 {
	font-size: 1rem;
	letter-spacing: 3px;
}

footer {
	border-top: 1px solid lightgray;
	margin-top: 20px;
	padding: 20px 0;
	text-align: center;
	color: gray;
	font-size: .8rem;
}

ul.imgList {
	max-width: 500px;
	margin: 10px auto;
	.column_3 ();
}

.tab_style_1 {
	border: 1px solid gray;
	header li {
		border-bottom: 1px solid gray;
		&.active {
			border-bottom: 0;
		}
	}
}

.tab_style_2 {
	& > div > div {
		background-color: #E7E7E7;
	}

	header li {
		border-top: 3px solid transparent;
		&.active {
			border-color: #0084C9 #9A9A9A #9A9A9A;
			border-top-color: #0084C9;
			color: #0084C9;
			background-color: #E7E7E7;
		}
	}
}

.tab {
	.scrollTab;
	.tab_style_2;
	header li {
		width: 33.3%;
	}

	margin: 0 auto;
	width: 90%;
	max-width: 500px;
	& > div > div {
		overflow: hidden;
		padding: 10px;
		box-sizing: border-box;
	}
}

.p {
	p {
		margin: 10px 0;
		font-size: .9rem;
		text-indent: 2em;
	}

	li {
		list-style-type: disc;
		font-size: .9rem;
		margin: 5px 10px;
		margin-left: 15px;
		color: lighten(black, 30%);
	}
}

// �޷����¹���
.idScroller {
	overflow: hidden;
	height: 25px;
	padding-left: 15px;
	li {
		height: 25px;
		line-height: 25px;
		white-space: nowrap;
		a {
			font-size: 1rem;
			color: #666;
		}
	}
}

.menu {
	max-width: @maxWidth;
	margin: 0 auto;
	& > li {
		float: left;
		padding: 0 2%;
		.downdrop_menu_parentNode ();
		menu {
			line-height: 25px;
			padding: 0 5px;
			width: 200px;
			background-color: #eee;
			div {
				font-size: .8rem;
				color: gray;
				line-height: 15px;
				margin: 10px 0;
			}
		}
	}
}

// display:none/block 版
.menu2 {
	max-width: @maxWidth;
	margin: 0 auto;
	& > li {
		float: left;
		padding: 0 2%;
		box-sizing: border-box;
		position: relative;
		&:hover menu {
			display: block;
		}

		menu {
			line-height: 25px;
			display: none;
			z-index: 99999999;
			padding: 0 5px;
			box-sizing: border-box;
			width: 200px;
			background-color: #eee;
			overflow: hidden;
			margin: 0;
			position: absolute;
			div {
				font-size: .8rem;
				color: gray;
				line-height: 15px;
				margin: 10px 0;
			}

			&:hover {
				display: block;
			}
		}
	}
}

.banner {
	width: 98%;
	.centerLimitWidth ();
	max-height: 280px;
}

.msgbox_style_1 () {
	background-color: #ebebeb;
	border: 1px solid #d3d3d3;
	h1 {
		font-size: .9rem;
		text-align: center;
		padding: 5px 0;
		letter-spacing: 3px;
	}

	.inner {
		background-color: #f7f7f7;
		border: 1px solid #dadada;
	}

	.bottomCloseBtn {
	}

	.btn {
		& > div {
			background-color: #f7f7f7;
			font-size: .9rem;
			.transition (ease background-color .6s);
			&:hover {
				background-color: gray;
				border-color: lightgray;
			}

			&:active {
				color: white;
				border-color: white;
			}
		}
	}
}

.msgbox {
	.fadeIn (.8s);
	position: fixed;
	top: 50%;
	.msgbox_style_1;
	width: 50%;
	min-width: 300px;
	max-width: 400px;
	z-index: 99999999;
	margin: auto;
	min-height: 100px;
	.inner {
		margin: 5px;
		margin-top: 0;
		padding: 10px;
		overflow: hidden;
	}

	.topCloseBtn {
		position: absolute;
		text-align: center;
		top: 0;
		right: 10px;
		width: 16px;
		line-height: 16px;
		height: 16px;
		background-color: gray;
		color: white;
		cursor: pointer;
	}

	.closeAction {
	}

	.btn {
		margin: 5px auto;
		width: 70%;
		overflow: hidden;
		text-align: center;
		& > div {
			display: inline-block;
			max-width: 80px;
			cursor: pointer;
			text-align: center;
			border: 1px solid #d3d3d3;
			padding: 3px 10px;
			letter-spacing: 3px;
			box-sizing: border-box;
		}
	}

	.leftIcon {
		float: left;
		width: 50px;
		height: 50px;
		margin: 0 20px;
		line-height: 50px;
		font-size: 40px;
		text-shadow: 1px 1px 0px #FFF;
		text-align: center;
		border-radius: 32px;
		font-weight: bold;
		border: 1px solid lightgray;
		box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
		background: #E3DFE3 url("") repeat-x scroll center top;
		&.warning {
			color: red;
		}

		&.success {
			color: green;
		}

		&.query {
			color: #cac42e;
		}
	}
}

.msgbox_mask {
	.fadeIn (.5s);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999999;
	background-color: rgba(0, 0, 0, .5);
}

.simpleList , .simpleList1 , .simpleList2 , .simpleList3 {
	.centerLimitWidth;
	li {
		a {
			display: block;
		}

		.createTime {
			float: right;
		}
	}
}

// 专题
.simpleList1 {
	.column_1 ();
}

.simpleList2 {
	.column_2 ();
}

.simpleList3 {
	.column_3 ();
}

// 区域滚动
.my-area {
	.centerLimitWidth;
	width: 300px;
	height: 150px;
	::-webkit-scrollbar {
		width: 7px;
		height: 5px;
	}

	&::-webkit-scrollbar {
		width: 7px;
		height: 5px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: lightgray;
		border-radius: 3px;
		&:window-inactive {
			background-color: rgba(0, 0, 0, 0);
		}
	}
}

.col_List_1 {
	.center ();
	.column_1 ();
}

.col_List_2 {
	.center ();
	.column_2 ();
}

.prettyprint {
	max-width: 700px;
	width: 95%;
	margin: 10px auto;
	border-left: 3px solid #d1d1e8;
	outline: 0;
	resize: none;
	font-size: .8rem;
	overflow: auto;
	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

.pln {
	color: #000
}

@media screen {
	.str {
		color: #080
	}

	.kwd {
		color: #008
	}

	.com {
		color: #800
	}

	.typ {
		color: #606
	}

	.lit {
		color: #066
	}

	.pun , .opn , .clo {
		color: #660
	}

	.tag {
		color: #008
	}

	.atn {
		color: #606
	}

	.atv {
		color: #080
	}

	.dec , .var {
		color: #606
	}

	.fun {
		color: red
	}
}

@media print , projection {
	.str {
		color: #060
	}

	.kwd {
		color: #006;
		font-weight: bold
	}

	.com {
		color: #600;
		font-style: italic
	}

	.typ {
		color: #404;
		font-weight: bold
	}

	.lit {
		color: #044
	}

	.pun , .opn , .clo {
		color: #440
	}

	.tag {
		color: #006;
		font-weight: bold
	}

	.atn {
		color: #404
	}

	.atv {
		color: #060
	}
}

pre.prettyprint {
	padding: 2px;
	padding-left: 10px;
}

ol.linenums {
	margin-top: 0;
	margin-bottom: 0
}

li.L0 , li.L1 , li.L2 , li.L3 , li.L5 , li.L6 , li.L7 , li.L8 {
	list-style-type: none
}

li.L1 , li.L3 , li.L5 , li.L7 , li.L9 {
	background: #eee
}

.leftSidebar {
	.acMenu ();
	width: 20%;
	margin: 3% auto;
	overflow: hidden;
	& > li {
		border-top: 1px solid white;
		border-bottom: 1px solid lightgray;
		&.pressed {
			border-top: 0;
			border-bottom: 1px solid lightgray;
			h3 {
			}
		}

		ul {
			li {
				list-style-type: disc;
				padding-left: 10%;
				a {
					width: 100%;
					display: block;
				}

				&.selected {
					a {
						color: black;
					}
				}
			}
		}

		h3 , li {
			padding: 5px 0 5px 15px;
			letter-spacing: 2px;
			line-height: 20px;
			color: #939da8;
			font-size: 12px;
			&:hover , a:hover {
				color: black;
			}
		}
	}
}

.form-1 {
	.ajaxjs-form;
	padding:2%;
	dl {
		dt {
			width: 20%;
		}
	}

	input , textarea {
		.ajaxjs-inputField;
	}

	input[type=submit] , button {
		.ajaxjs-btn;
	}
	select{
		width:150px;
	}
}

// 常见消息提示框
@keyframes topMsg-fade-in {
    0% {
        opacity: 0;
    }
    30% {
        opacity: .2;
    }
    80% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes topMsg-fade-out {
    0% {
    }
    30% {
        opacity: .2;
    }
    80% {
        opacity: .4;
    }
    100% {
        opacity: 0;
    }
}

.topMsg{
	position:fixed;
	width:300px;
	height:80px;
	right: 30px;
	padding:10px;
	border-radius:5px;
	color: #0066cc;
	box-sizing: border-box;
	background-color: #f5faff;
	border:1px solid #0066cc;
	top: -100px;
	transition: top ease-in 550ms;
	animation-fill-mode: forwards;
	&.fadeIn{
		top: 100px;
		animation: topMsg-fade-in ease-in 550ms;
	}
	&.fadeOut{
		animation: topMsg-fade-out ease-in 550ms;
	}
}
